<template>
  <main
    class="w-full min-h-screen bg-gradient-to-br from-indigo-500 via-blue-400 to-purple-200 overflow-x-hidden relative content-center text-sm lg:text-base lg:text-lg xl:text-xl">
    <!-- sm': '640px',    // 手机
      'md': '768px',    // iPad竖屏
      'lg': '1024px',   // iPad横屏
      'xl': '1280px',   // 普通PC
      '2xl': '1536px',  // 大屏PC
      'ipad-pro': '1024px' // 特定设备断点
    -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 lg:grid-cols-4 gap-4">
      <!-- 手机: 1列; 小手机: 2列; iPad: 3列; PC: 4列 -->
      <div class="bg-gray-200 p-4">项目1</div>
      <div class="bg-gray-200 p-4">项目2</div>
      <div class="bg-gray-200 p-4">项目3</div>
      <div class="bg-gray-200 p-4">项目4</div>
    </div>
    <br />
    <nav class="flex flex-col lg:flex-row items-center justify-between p-4 bg-gray-800 text-white">
      <div class="text-xl font-bold mb-4 lg:mb-0">Logo</div>
      <div class="hidden lg:flex space-x-4">
        <a href="#" class="hover:text-gray-300">首页</a>
        <a href="#" class="hover:text-gray-300">产品</a>
        <a href="#" class="hover:text-gray-300">关于</a>
      </div>
      <button class="lg:hidden">☰</button>
    </nav>
    <br />
    <br />
    <br />
    <br />
    <br />
    <div class="columns-1 sm:columns-2 lg:columns-3 lg:columns-4">
      <div class="break-inside-avoid mb-4">内容块1内容块1内容块1内容块1内容块1内容块1内容块1内容块1内容块1内容块1内容块1内容块1内容块1内容块1内容块1内容块1</div>
      <div class="break-inside-avoid mb-4">内容块2内容块2内容块2内容块2内容块2内容块2内容块2内容块2内容块2内容块2内容块2内容块2内容块2内容块2内容块2内容块2内容块2内容块2
      </div>
      <div class="break-inside-avoid mb-4">
        内容块3内容块3内容块3内容块3内容块3内容块3内容块3内容块3内容块3内容块3内容块3内容块3内容块3内容块3内容块3内容块3内容块3内容块3内容块3内容块3</div>
      <div class="break-inside-avoid mb-4">
        内容块4内容块4内容块4内容块4内容块4内容块4内容块4内容块4内容块4内容块4内容块4内容块4内容块4内容块4内容块4内容块4内容块4内容块4内容块4内容块4内容块4内容块4</div>
    </div>
    <br />
    <div class="columns-1 sm:columns-2 lg:columns-3 lg:columns-4">
      <div class="break-inside-avoid mb-4">内容块1</div>
      <div class="break-inside-avoid mb-4">内容块2</div>
      <div class="break-inside-avoid mb-4">内容块3</div>
      <div class="break-inside-avoid mb-4">内容块4</div>
    </div>
    <br />
    <div class="columns-1 gap-4 sm:columns-2 lg:columns-3 lg:gap-6">
      <!-- 每条新闻 -->
      <article class="break-inside-avoid mb-6 bg-white p-4 rounded shadow">
        <h3 class="text-lg font-bold">新闻标题</h3>
        <p class="mt-2 text-gray-600">新闻内容摘要...</p>
      </article>

      <article class="break-inside-avoid mb-6 bg-white p-4 rounded shadow">
        <h3 class="text-lg font-bold">新闻标题</h3>
        <p class="mt-2 text-gray-600">新闻内容摘要...</p>
      </article>

      <!-- 更多新闻条目... -->
    </div>
    <br />
    <div class="columns-1 gap-4 sm:columns-2 lg:columns-3 xl:columns-4">
      <!-- 产品卡片 -->
      <div class="break-inside-avoid mb-6">
        <img
          src="https://images.unsplash.com/photo-1558603668-6570496b66f8?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0NjMyMDUzOA&ixlib=rb-1.2.1&q=85&w=400"
          class="w-full rounded">
        <h3 class="mt-2 font-medium">产品名称</h3>
        <p class="text-gray-500">¥99.00</p>
      </div>

      <div class="break-inside-avoid mb-6">
        <img
          src="https://images.unsplash.com/photo-1603771628302-c32c88e568e3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0NjMxOTUxNg&ixlib=rb-1.2.1&q=80&w=800"
          class="w-full rounded">
        <h3 class="mt-2 font-medium">产品名称</h3>
        <p class="text-gray-500">¥129.00</p>
      </div>

      <!-- 更多产品卡片... -->
    </div>
  </main>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
const { $gsap } = useNuxtApp()


onMounted(() => {
  init()
});

const init = () => {


}

</script>

<style lang="scss" scoped>
.content-center {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  flex-direction: column;
}



.purple {
  background-color: #9c27b0;
}

.green {
  background-color: #4caf50;
}

.blue {
  background-color: #2196f3;
}

.red {
  background-color: #f44336;
}

.yellow {
  background-color: #ffc107;
}

.orange {
  background-color: #ff9800;
}
</style>